<template>
  <view class="redlimit">
    <view class="redheader">
      <view class="title flex flex-align flex-center">
        <text>当前红包额度</text>
      </view>
      <view class="rednum flex flex-center">
        <text class="size">¥</text><text>1000</text>
      </view>
      <view class="redbody flex flex-align flex-center" @click="openRedguize">
        <view>红包额度规则及说明</view>
      </view>
    </view>
    <!-- 额度明细 -->
    <view class="redList bgRadius">
      <view class="redbody-title flex flex-align flex-center">
        <text>额度明细</text>
      </view>
      <view class="redbody-flex flex">
        <view :class="type==1?'flex-1 active':'flex-1'" @click="selectType(1)">额度提升</view>
        <view :class="type==2?'flex-1 active':'flex-1'" @click="selectType(2)">额度减少</view>
      </view>
      <view class="redbody-list flex flex-align flex-bt">
        <view class="redbody-list-left">
          <view class="title">积分兑换商品</view>
          <view class="text miaoshu">5元现金红包，兑换后立即打款…</view>
          <view class="text">2025-11-25 11:12:30</view>
        </view>
        <view class="redbody-list-right">
          <text>¥1000</text>
        </view>
      </view>
      <view class="redbody-list flex flex-align flex-bt">
        <view class="redbody-list-left">
          <view class="title">积分兑换商品</view>
          <view class="text miaoshu">5元现金红包，兑换后立即打款…</view>
          <view class="text">2025-11-25 11:12:30</view>
        </view>
        <view class="redbody-list-right">
          <text>¥1000</text>
        </view>
      </view>
    </view>
    <redGuize ref="redGuizeRef"></redGuize>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import redGuize from './components/redGuize.vue';
const type = ref(1)
const redGuizeRef = ref<InstanceType<typeof redGuize>>()
const selectType = (num:number) => {
  type.value = num
}
const openRedguize = () => {
  redGuizeRef.value?.open()
}
</script>

<style scoped lang="scss">
.redlimit{
  padding: 30rpx;
  .redheader{
    background-image: url('@/static/user/user30.png');background-repeat: no-repeat;background-size: 100% 100%;
    width: 100%;height: 358rpx;
    .title{background:url('@/static/user/user31.png') no-repeat ;background-size: 100% 100%;width: 274rpx;height: 72rpx;margin: 0 auto;text-align: center;
      color: #fff;font-size: 28rpx;
    }
    .rednum{font-weight: bold;font-size: 52rpx;margin: 60rpx 0 40rpx;color: #fff;align-items: flex-end;
      .size{font-size: 32rpx;}
    }
   .redbody{
    view{color: #F73B57;font-size: 26rpx;text-align: center;background: #fff;padding: 20rpx 40rpx;border-radius: 60rpx;font-weight: bold;}
   }
  }
}
.redList{margin-top: 30rpx;
  .redbody-title{font-size: 30rpx;}
  .redbody-flex{margin: 30rpx 0;padding: 0 10rpx;
   view{
     color: #323233;background: #F5F6F7;display: flex;justify-content: center;
     font-size: 26rpx;align-items: center;border-radius: 60rpx;height: 70rpx;
   }
   .active{background: #FF555F;color: #fff;}
   view:nth-child(1){margin-right: 20rpx;}
  }
  .redbody-list{padding: 20rpx 10rpx;border-bottom: 1rpx solid #F2F3F5;
  .redbody-list-left{
    .title{color: #323233;font-size: 28rpx;margin-bottom: 5rpx;}
    .text{color: #969799;font-size: 24rpx;}
    .miaoshu{width: 500rpx;margin-bottom: 5rpx;}
  }
  .redbody-list-right{
    text-align: right;font-size: 32rpx;color: #FF555F;font-weight: bold;
  }
 }
}
</style>